<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Fix bar demo</title>
    <style>

      .fix {
        /* position: fixed 脱离了文档流对元素进行浮动定位 */
        position: fixed;
        left: 0;
        right: 0;

        /* 固定栏高度为50px */
        height: 50px;
        background:#D46767;
      }

      .fix-top {
        /* 定位到顶部 */
        top: 0;
      }


      .fix-bottom {
        /* 定位到底部 */
        bottom: 0;
      }

      /* content 是static定位，其在文档流中所占空间并没有受到上下两个fixed定位的固定栏影响，依然占满整个body。
         如果body不设置padding:50px 0; content的顶部和底部的部分内容将会被上下两个固定栏遮挡 
         */
      .content {
        border: 1px solid #aaa;
        background:#4EAF6B;
      }

      body {
        /* 上下padding设置为50px,与固定栏的高度相同，这样padding范围内的content内容将不会被fixed固定栏影响 */
        padding:50px 0;
      }
    </style>
  </head>
  <body>
    <!-- <div id="app"></div> -->
    <div class="fix fix-top">
    </div>


    <div class="content">
      <h1>123a</h1>
      <h1>123</h1>
      <h1>123</h1>
      <h1>123</h1>
      <h1>123</h1>
      <h1>123</h1>
      <h1>123</h1>
      <h1>123</h1>
      <h1>123</h1>
      <h1>123</h1>
      <h1>123</h1>
      <h1>123</h1>
      <h1>123</h1>
      <h1>123</h1>
      <h1>123e</h1>
    </div>

    <div  class="fix fix-bottom">
    </div>
    <!-- built files will be auto injected -->
  </body>
</html>
